<script setup>
import {ref} from 'vue';
  import { useCounterStore } from '@/stores/counter';
  import router from '@/router';
  const name=useCounterStore().name
  const username=useCounterStore().username
  const permissions=useCounterStore().permissions
  function logout(){
    useCounterStore().clearUserInfo()
    router.push('/login')
  }
  import UpatePasswordForm from './user/UpdatePasswordForm.vue'
  const upatePasswordForm=ref(null)
//修改
function  updataPassword() {
  upatePasswordForm.value.changeDialogVisible(true)
  console.log('修改密码')
}
</script>
<template>
  <div style="display: flex;flex-direction: row;" >
 <h1>药品商城后台管理系统</h1>
  <div  style="margin-top: 5px;margin-left: 80%;"> 
    <el-popover
    placement="top-start"
    title="用户信息"
    :width="200"
    trigger="hover"
  >
    <template #reference>
      <el-avatar  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="50" :src="circleUrl"/>
    </template>
    <el-card>
    <h4>姓名:{{ name }} </h4> 
    <h4> 账号:{{ username }} </h4>
    <h4>权限:{{ permissions===1?"管理员":"普通账号" }}</h4>  
    <el-button style="float: left; padding: 3px 0" type="text" @click="logout" >退出登录</el-button>
    <el-button style="float: right; padding: 3px 0" type="text" @click="updataPassword">修改密码</el-button>
    </el-card>
  </el-popover>
  </div>
  <UpatePasswordForm :username="username" ref="upatePasswordForm"></UpatePasswordForm>
</div>
</template>